<template>
    <div class="swiper-container" id="banner">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in bannerData" :key="index">
                <img :src="item.imageUrl" @load="addLoadedCounter(index)">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev swiper-button-white"></div>
        <div class="swiper-button-next swiper-button-white"></div>

        <!-- 如果需要滚动条 -->
        <!--<div class="swiper-scrollbar"></div>-->
    </div>
</template>

<script>
    import Swiper from 'Swiper';
    import musicApi from '@/request/musicApi';
    // import 'https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js';
    // import 'https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js';

    export default {
        name: "banner",
        data() {
            return {
                bannerData: ''
            }
        }, methods: {
            initSwiper() {
                let mySwiper = new Swiper('#banner', {
                    direction: 'horizontal',
                    observer: true,
                    observeParents: true,
                    loop: true,
                    autoHeight: true, //高度随内容变化
                    autoplay: {
                        disableOnInteraction: false,
                        delay: 3000,
                        stopOnLastSlide: false
                    },
                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },

                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    //swiper回调函数
                    on: {}
                });
                $('#banner').mouseover(()=>{
                    mySwiper.autoplay.stop();
                });
                $('#banner').mouseout(()=>{
                    mySwiper.autoplay.start();
                });
            },
            addLoadedCounter(index){
                if(index==0)
                    this.$store.commit('addLoadedCounter');
            }
        },
        created() {
        },
        mounted() {
            musicApi.getBanner('/banner', {})
                .then(res => {
                    this.bannerData = res.data.banners;
                    this.$store.commit('addCounter');//banner图第一张图片加载完毕即可
                    this.$nextTick(() => {  // 下一个UI帧再初始化swiper
                        this.initSwiper();
                    });
                });
        }
    }
</script>

<style lang="scss">
    @import "~_swiper@4.5.0@swiper/dist/css/swiper.css";

    div.swiper-container {
        @media (max-width: 767px) {
            div.swiper-button-prev, div.swiper-button-next {
                display: none;
            }

        }
        .swiper-wrapper {
            img {
                height: auto;
                width: 100%;
            }
        }
        .swiper-pagination {
            .swiper-pagination-bullet-active {
                background: #CB0C0C;
            }
        }
    }
</style>